<template>
  <div class="index">
    <div class="haerd">
      <div class="haerd_left">
        <div class="backBtn" @click.stop.prevent="goBack">返回</div>
        <div class="title">医疗健康</div>
      </div>
      <div class="haerd_right"></div>
    </div>

    <div class="module_box">
      <div class="health" @click.stop.prevent="goRegister">
        <div class="module_left">预约挂号</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/register_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/register_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">医保支付</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/pay_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/pay_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">手机买药</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/medicine_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/medicine_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">在线问诊</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/Consultation_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/Consultation_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">医保账户查询</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/query_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/query_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">医保电子凭证激活</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/activation_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/activation_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">城乡居民医疗保险缴费</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/insurance_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/insurance_icon2.png"
            alt=""
          />
        </div>
      </div>
      <div class="health">
        <div class="module_left">门诊慢特病病种申请</div>

        <div class="module_right">
          <img
            class="icon1"
            src="@/assets/health/healthIndex/apply_icon1.png"
            alt=""
          />
          <img
            class="icon2"
            src="@/assets/health/healthIndex/apply_icon2.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="prompt">温馨提示：模拟体验，非真实操作。</div>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
// 引入wxjs
import wx from "weixin-js-sdk";
export default {
  name: "index",
  data() {
    return {};
  },
  created() {},
  mounted() {},

  methods: {
    async goClassification() {
      const share = {
        title: "每日新闻",
        desc: "2022年12月20日21:47:55每日新闻",
        share_url: "https://blogobs.88688.team/blog/l-logo-y.jpg",
      };
      location.replace(
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&desc=" +
          share.desc
      );
    },
    async goRegister() {
      this.$router.push({
        path: "/health/register/index",
      });
    },
    async goBack() {
      this.$router.push({
        path: "/classification",
      });
    },
    getShareInfo() {
      //获取url链接（如果有#需要这么获取）
      var url = encodeURIComponent(window.location.href.split("#")[0]);
      //获取url链接（如果没有#需要这么获取）
      // var url = encodeURIComponent(window.location.href);
      if (typeof url === "string") {
        console.log("str 是字符串类型");
      } else {
        console.log("str 不是字符串类型");
      }
      getData(url).then((res) => {
        console.log(res);
        wx.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: parseInt(res.data.timestamp), // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"], // 必填，需要使用的 JS 接口列表
        });
        wx.ready(() => {
          //自定义“分享给朋友”及“分享到QQ”按钮的分享内容
          wx.onMenuShareAppMessage({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
            fail: function (reject) {
              alert(JSON.stringify(reject), "失败");
            },
          });
          //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
          wx.onMenuShareTimeline({
            title: "每日新闻",
            desc: "2022年12月20日21:47:55每日新闻",
            link: "http://www.ruizhihuitech.com/",
            imgUrl: "https://blogobs.88688.team/blog/l-logo-y.jpg",
            type: "", // 分享类型,music、video或link，不填默认为link
            dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {},
          });
        });
        //错误了会走 这里
        wx.error(function (res) {
          console.log("微信分享错误信息", res);
          // alert('ready 失败:', res);
        });
      });
    },
    openShare() {
      this.getShareInfo();
    },
  },
};
</script>

<style scoped lang="less">
.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(@/assets/health/healthIndex/healthIndex_bg.png) no-repeat
    center;
  background-size: 100% 100%;
}
@media screen and (min-width: 440px) {
  .haerd {
    padding: 23px 20px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .haerd_left {
      .backBtn {
        width: 125px;
        height: 52px;
        background: url(@/assets/health/healthIndex/backBtn.png) no-repeat
          center;
        background-size: 100% 100%;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 24px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 0px 1px 5px rgba(200, 121, 0, 0.5);
      }
      .title {
        margin-top: 25px;
        margin-left: 10px;
        font-family: Alimama FangYuanTi VF;
        font-weight: bold;
        font-size: 38px;
        color: #ffffff;
        line-height: 41px;
      }
    }
    .haerd_right {
      width: 160px;
      height: 109px;
      background: url(@/assets/health/healthIndex/healthIndex_subscript.png)
        no-repeat center;
      background-size: 100% 100%;
    }
  }

  .module_box {
    margin: 0 20px 0;
    position: absolute;
    top: 170px;
    max-height: 455px;
    overflow-y: auto;
    padding-right: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .health {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 160px;
      height: 155px;
      background: #ffffff;
      border-radius: 15px;
      margin-bottom: 15px;
      .module_left {
        margin-top: 20px;
        width: 70px;
        height: 70px;
      }
      .module_right {
        margin-top: 12px;
        font-family: FZLanTingHeiS-DB-GB;
        font-weight: 700;
        font-size: 20px;
        color: #333333;
        line-height: 19px;
        padding: 0 20px;
        text-align: center;
      }
    }
  }

  .prompt {
    width: 100%;
    position: absolute;
    top: 637px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: #666666;
    text-align: center;
  }
}
@media screen and (max-width: 440px) {
  .haerd {
    padding: 46px 40px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .haerd_left {
      .backBtn {
        width: 251px;
        height: 105px;
        background: url(@/assets/health/healthIndex/backBtn.png) no-repeat
          center;
        background-size: 100% 100%;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 48px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 0px 1px 5px rgba(200, 121, 0, 0.5);
      }
      .title {
        margin-top: 51px;
        margin-left: 20px;
        font-family: Alimama FangYuanTi VF;
        font-weight: bold;
        font-size: 76px;
        color: #ffffff;
        line-height: 82px;
      }
    }
    .haerd_right {
      width: 320px;
      height: 218px;
      background: url(@/assets/health/healthIndex/healthIndex_subscript.png)
        no-repeat center;
      background-size: 100% 100%;
    }
  }

  .module_box {
    width: 100%;
    // margin: 0 40px 0;
    position: absolute;
    top: 340px;
    max-height: 910px;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .health {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      // flex-direction: column;
      align-items: center;
      width: 325px;
      height: 150px;
      background: #ffffff;
      border-radius: 15px;
      margin-bottom: 20px;
      margin-right: 20px;
      .module_left {
        display: flex;
        // justify-content: center;
        margin-left: 20px;
        align-items: center;
        width: 174px;
        height: 71px;
        font-family: Alibaba PuHuiTi 2;
        font-weight: bold;
        font-size: 33px;
        color: #333333;
        // margin-left: 20px;
        z-index: 99;
      }
      .module_right {
        .icon1 {
          width: 255px;
          height: 255px;
          position: absolute;
          right: -80px;
          bottom: 10px;
        }
        .icon2 {
          width: 120px;
          height: 120px;
          position: absolute;
          right: -20px;
          bottom: -16px;
        }
      }
    }
    .health:nth-child(2n) {
      margin-right: 0;
    }
  }

  .prompt {
    width: 100%;
    position: absolute;
    bottom: 2vh;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 30px;
    color: #666666;
    text-align: center;
  }
}
</style>
